<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="top-bar">
      <view class="back-btn" @click="navigateBack">
        <image class="back-icon" src="/static/jiantou2_1.png"></image>
      </view>
      <view class="title">创建商品（下沙店）</view>
      <view class="save-btn" @click="saveProduct">√</view>
    </view>

    <!-- 商品表单 -->
    <view class="form-container">
      <!-- 基础设置 -->
      <view class="form-section">
        <view class="section-title">基础设置</view>
        
        <!-- 商品图片 -->
        <view class="form-item">
          <view class="item-label">商品图片</view>
          <view class="item-content">
            <view class="upload-container">
             <!-- <image class="upload-icon" src="/static/paizhao_1.png"></image> -->
              <text class="upload-text">上传商品图片</text>
            </view>
          </view>
        </view>

        <!-- 分类 -->
        <view class="form-item">
          <view class="item-label">分类</view>
          <view class="item-content select-item" @click="openCategorySelect">
            <text class="select-text">{{ selectedCategory || '选择商品分类' }}</text>
            <image class="arrow-icon" src="/static/jiantou2_3.png"></image>
          </view>
        </view>

        <!-- 品名 -->
        <view class="form-item">
          <view class="item-label">品名</view>
          <view class="item-content">
            <input class="input-field" type="text" placeholder="填写商品名称" v-model="productName"/>
          </view>
        </view>

        <!-- 单位 -->
        <view class="form-item">
          <view class="item-label">单位</view>
          <view class="item-content select-item" @click="openUnitSelect">
            <text class="select-text">{{ selectedUnit || '请选择单位' }}</text>
            <image class="arrow-icon" src="/static/jiantou2_3.png"></image>
          </view>
        </view>

        <!-- 类型 -->
        <view class="form-item">
          <view class="item-label">类型</view>
          <view class="item-content select-item" @click="openTypeSelect">
            <text class="select-text">{{ selectedType || '实物商品' }}</text>
            <image class="arrow-icon" src="/static/jiantou2_3.png"></image>
          </view>
        </view>
      </view>

      <!-- 基础选项 -->
      <view class="form-section">
        <view class="section-title">基础选项</view>

        <!-- 会员价设置 -->
        <view class="form-item">
          <view class="item-label">会员价设置</view>
          <view class="item-content switch-item">
            <text class="switch-text">{{ memberPriceEnabled ? '使用会员价' : '不使用会员价' }}</text>
            <switch class="custom-switch" v-model="memberPriceEnabled" @change="toggleMemberPrice"/>
          </view>
        </view>

        <!-- 启用积分价 -->
        <view class="form-item">
          <view class="item-label">启用积分价</view>
          <view class="item-content switch-item">
            <switch class="custom-switch" v-model="pointsPriceEnabled" @change="togglePointsPrice"/>
          </view>
        </view>

        <!-- 启用库存设置 -->
        <view class="form-item">
          <view class="item-label">启用库存设置</view>
          <view class="item-content switch-item">
            <switch class="custom-switch" v-model="stockEnabled" @change="toggleStock"/>
          </view>
        </view>

        <!-- 规格选项 -->
        <view class="form-item">
          <view class="item-label">规格选项</view>
          <view class="item-content select-item" @click="openSpecSelect">
            <text class="select-text">{{ selectedSpec || '单规格' }}</text>
            <image class="arrow-icon" src="/static/jiantou2_3.png"></image>
          </view>
        </view>
      </view>

      <!-- 默认规格 -->
      <view class="form-section" v-if="selectedSpec === '单规格' || !selectedSpec">
        <view class="section-title">默认规格</view>

        <!-- 成本单价 -->
        <view class="form-item">
          <view class="item-label">成本单价</view>
          <view class="item-content">
            <input class="input-field" type="number" placeholder="输入价格" v-model="costPrice"/>
          </view>
        </view>

        <!-- 零售单价 -->
        <view class="form-item">
          <view class="item-label">零售单价</view>
          <view class="item-content">
            <input class="input-field" type="number" placeholder="输入价格" v-model="retailPrice"/>
          </view>
        </view>

        <!-- 库存数 -->
        <view class="form-item" v-if="stockEnabled">
          <view class="item-label">库存数</view>
          <view class="item-content">
            <input class="input-field" type="number" placeholder="输入数量" v-model="stockQuantity"/>
          </view>
        </view>

        <!-- 库存存放处 -->
        <view class="form-item" v-if="stockEnabled">
          <view class="item-label">库存存放处</view>
          <view class="item-content select-item" @click="openStockLocationSelect">
            <text class="select-text">{{ selectedStockLocation || '请选择货位' }}</text>
            <image class="arrow-icon" src="/static/jiantou2_3.png"></image>
          </view>
        </view>
      </view>

      <!-- 多规格设置 (动态生成) -->
      <view class="form-section" v-if="selectedSpec === '多规格'">
        <view class="section-title">规格设置</view>
        <view class="spec-items">
          <view class="spec-item" v-for="(spec, index) in specItems" :key="index">
            <view class="form-item">
              <view class="item-label">规格名称</view>
              <view class="item-content">
                <input class="input-field" type="text" placeholder="输入规格名称" v-model="spec.name"/>
              </view>
            </view>
            <view class="form-item">
              <view class="item-label">成本单价</view>
              <view class="item-content">
                <input class="input-field" type="number" placeholder="输入价格" v-model="spec.costPrice"/>
              </view>
            </view>
            <view class="form-item">
              <view class="item-label">零售单价</view>
              <view class="item-content">
                <input class="input-field" type="number" placeholder="输入价格" v-model="spec.retailPrice"/>
              </view>
            </view>
            <view class="form-item" v-if="stockEnabled">
              <view class="item-label">库存数</view>
              <view class="item-content">
                <input class="input-field" type="number" placeholder="输入数量" v-model="spec.stockQuantity"/>
              </view>
            </view>
            <view class="delete-spec" @click="deleteSpec(index)">删除规格</view>
          </view>
        </view>
        <view class="add-spec-btn" @click="addSpec">+ 添加规格</view>
      </view>

      <!-- 扩展信息 -->
      <view class="form-section">
        <view class="section-title expandable" @click="toggleExpand">
          <text>扩展信息</text>
          <image class="expand-icon" :src="expanded ? '/static/jiantou2_1.png' : '/static/jiantou2_3.png'" :style="expanded ? 'transform: rotate(-90deg)' : ''"></image>
        </view>
        <view class="expand-content" v-if="expanded">
          <!-- 这里可以添加扩展信息的表单元素 -->
          <view class="form-item">
            <view class="item-label">商品描述</view>
            <view class="item-content">
              <textarea class="textarea-field" placeholder="输入商品描述" v-model="productDescription"></textarea>
            </view>
          </view>
          <!-- 可以添加更多扩展信息字段 -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 商品基本信息
      productName: '',
      selectedCategory: '',
      selectedUnit: '',
      selectedType: '实物商品',
      productDescription: '',

      // 选项开关
      memberPriceEnabled: false,
      pointsPriceEnabled: true,
      stockEnabled: true,

      // 规格信息
      selectedSpec: '单规格',
      costPrice: '',
      retailPrice: '',
      stockQuantity: '12',
      selectedStockLocation: '',
      specItems: [],

      // 扩展信息
      expanded: false
    };
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },

    // 保存商品
    saveProduct() {
      // 这里实现保存商品的逻辑
      console.log('保存商品:', this.productName);
      // 表单验证
      if (!this.productName) {
        uni.showToast({
          title: '请填写商品名称',
          icon: 'none'
        });
        return;
      }

      // 提交表单数据
      // 模拟提交成功
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      });

      // 跳转到商品详情页
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    },

    // 打开分类选择
    openCategorySelect() {
      // 这里可以打开分类选择器
      const categories = ['器材', '饮品', '零食', '其他'];
      uni.showActionSheet({
        itemList: categories,
        success: (res) => {
          this.selectedCategory = categories[res.tapIndex];
        }
      });
    },

    // 打开单位选择
    openUnitSelect() {
      const units = ['个', '包', '瓶', '盒', '其他'];
      uni.showActionSheet({
        itemList: units,
        success: (res) => {
          this.selectedUnit = units[res.tapIndex];
        }
      });
    },

    // 打开类型选择
    openTypeSelect() {
      const types = ['实物商品', '虚拟商品'];
      uni.showActionSheet({
        itemList: types,
        success: (res) => {
          this.selectedType = types[res.tapIndex];
        }
      });
    },

    // 打开规格选择
    openSpecSelect() {
      const specs = ['单规格', '多规格'];
      uni.showActionSheet({
        itemList: specs,
        success: (res) => {
          this.selectedSpec = specs[res.tapIndex];
          if (this.selectedSpec === '多规格' && this.specItems.length === 0) {
            this.addSpec(); // 默认添加一个规格
          }
        }
      });
    },

    // 打开库存位置选择
    openStockLocationSelect() {
      const locations = ['主仓库', '副仓库', '前台货架', '其他'];
      uni.showActionSheet({
        itemList: locations,
        success: (res) => {
          this.selectedStockLocation = locations[res.tapIndex];
        }
      });
    },

    // 切换会员价
    toggleMemberPrice() {
      console.log('会员价设置:', this.memberPriceEnabled);
    },

    // 切换积分价
    togglePointsPrice() {
      console.log('积分价设置:', this.pointsPriceEnabled);
    },

    // 切换库存设置
    toggleStock() {
      console.log('库存设置:', this.stockEnabled);
    },

    // 切换扩展信息
    toggleExpand() {
      this.expanded = !this.expanded;
    },

    // 添加规格
    addSpec() {
      this.specItems.push({
        name: '',
        costPrice: '',
        retailPrice: '',
        stockQuantity: '0'
      });
    },

    // 删除规格
    deleteSpec(index) {
      this.specItems.splice(index, 1);
    }
  }
};
</script>

<style lang="scss">
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  background-image: url('/static/Group_427319214.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 30rpx;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;

  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .back-icon {
    width: 40rpx;
    height: 40rpx;
  }

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
  }

  .save-btn {
    font-size: 32rpx;
    color: #1EBE76;
    padding: 0 20rpx;
  }
}

.form-container {
  padding: 140rpx 30rpx 30rpx;
}

.form-section {
  background-color: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  overflow: hidden;

  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
    padding: 30rpx;
    border-bottom: 2rpx solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .expandable {
    cursor: pointer;
  }

  .expand-icon {
    width: 40rpx;
    height: 40rpx;
    transition: transform 0.3s;
  }

  .expand-content {
    padding: 0 30rpx 30rpx;
  }
}

.form-item {
  display: flex;
  padding: 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
  align-items: center;

  .item-label {
    width: 180rpx;
    font-size: 28rpx;
    color: #333333;
  }

  .item-content {
    flex: 1;
    position: relative;
  }

  &:last-child {
    border-bottom: none;
  }
}

.input-field {
  width: 100%;
  height: 80rpx;
  font-size: 28rpx;
  color: #333333;
  border: none;
  outline: none;
}

.textarea-field {
  width: 100%;
  height: 200rpx;
  font-size: 28rpx;
  color: #333333;
  border: 2rpx solid #f0f0f0;
  border-radius: 10rpx;
  padding: 20rpx;
  box-sizing: border-box;
  outline: none;
}

.select-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;

  .select-text {
    font-size: 28rpx;
    color: #999999;
  }

  .arrow-icon {
    width: 40rpx;
    height: 40rpx;
  }
}

.switch-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;

  .switch-text {
    font-size: 28rpx;
    color: #333333;
  }

  .custom-switch {
    transform: scale(1.2);
  }
}

.upload-container {
  width: 160rpx;
  height: 160rpx;
  border: 2rpx dashed #dcdcdc;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .upload-icon {
    width: 60rpx;
    height: 60rpx;
    margin-bottom: 10rpx;
  }

  .upload-text {
    font-size: 24rpx;
    color: #999999;
  }
}

.spec-items {
  padding: 0 30rpx;
}

.spec-item {
  border-bottom: 2rpx solid #f0f0f0;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;

  &:last-child {
    border-bottom: none;
  }
}

.delete-spec {
  font-size: 28rpx;
  color: #E64340;
  text-align: right;
  padding: 10rpx 30rpx 0 0;
}

.add-spec-btn {
  font-size: 28rpx;
  color: #1EBE76;
  text-align: center;
  padding: 20rpx 0;
}
</style>